<template>
<view class="comment-item">
  <image class="author-avatar left" :src="comment.user_avatar"></image>
  <view class="right">
    <view class="head">
      <view class="right_left">
        <view class="info">
          <view class="right_name">{{comment.user_name}}</view>
          <view class="right_time">{{formatTime(comment.date)}}</view>
        </view>
      </view>
      <view class="right_right"  @click="likeComment(index)" :style="'color:'+ [isLike ?'#1296db;':'#323232']">
        <text class="cuIcon-appreciate"></text>
        <text class="thumb_count">{{comment.belike}}</text>
      </view>
    </view>
    <view class="comment-content">{{comment.content}}</view>
  </view>
</view>
</template>

<script>
const db = wx.cloud.database();
const _ = wx.cloud.database().command;
  export default {
    name:"comment-item",
    props:{
      comment:{
        type:Object,
        required:true
      },
      _id:{
        type:String,
        required:true
      },
      index:{
        type:Number,
        required:true
      },

    },
    data() {
      return {
        isLike:false
      };
    },

    methods:{
      //评论点赞
      likeComment(index){
        this.$emit("addLike",index);
        this.isLike = true;
        db.collection("comment").where({article_id:this._id}).update({
          data:{
            [`comments.${index}.belike`]:_.inc(1)
          }
        }).then(res=>{
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })
      },
	  
	  //时间格式化工具
	  formatTime(date){
		 date = new Date(date);
	    let month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : ('0' + (date.getMonth() + 1));
	    let day = date.getDate() >= 10 ? date.getDate() : ('0' + date.getDate());
	    let hour = date.getHours() >= 10 ? date.getHours() : ('0' + date.getHours());
	    let min = date.getMinutes() >= 10 ? date.getMinutes() : ('0' + date.getMinutes());
	    return month + '-' + day + ' ' + hour + ':' + min;
	  },
    }
  }
</script>

<style>
 .comment-item{
   display: flex;
   margin-top:40upx;
 }
 .right{
   display: flex;
   flex:1;
   flex-direction: column;
 }
 .head{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .info{
   margin-left:20upx;
 }
 .right_name{
   font-size: 30upx;
   color: #323232;
 }
 .right_time{
   font-size: 24upx;
   margin-top:10upx;
   color: #999999;
 }
 .right_right{
   width:60upx;
   display: flex;
   justify-content: space-between;
   align-items: center;
  font-size: 30upx;
  color: #323232;
 }
 .thumb_count{
   /* margin-left:15upx; */
 }
 .comment-content{
   margin:25upx;
 }
 .author-avatar{
   		background-color: #D8D8D8;
   		border-radius: 50%;
   		height: 72upx;
   		width: 72upx;
       margin-right:20upx;
 }
</style>